<!--发布房源时的地址和地图定位组件-->

<template>
  <div>
    <el-form>
      <el-form-item label="省市区">
        <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="datas.addressinfo" placeholder="请输入详细地址"></el-input>
        <el-button type="primary" round @click="onSearch">定位</el-button>
      </el-form-item>
    </el-form>
    <!--地图显示-->
    <div id="container"></div>
    <!--下一步和上一步-->
    	    <el-button type="primary" @click="Step(2)">上一步</el-button>
    			<el-button type="success" @click="Step(1)">下一步</el-button>

  </div>
</template>
<script>
  //引入三级联动 依赖js
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  //地图
  var geocoder, map, marker = null;
  export default {
    data() {
      return {
        //三级联动
        options: regionData,
        selectedOptions: ['340000', '340100', '340104'], //默认地址 此处填写对应的value值
        //地图
        markersArray: [], //用来存储标注

        //数据绑定
        datas: {
          address: '安徽省-合肥市-蜀山区', //省市区
          addressinfo: '' ,//详细地址
          longitude:'',//经度
          latitude:'',//纬度
          num:0//上下步
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      Step(num){//1下一步 2上一步
        this.datas.num=num;
        this.$emit('mapEvent', this.datas) // 把数据传给父组件
      },
      //三级联动 即可定位
      handleChange(val) {
        //获取地址
        /*CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市；
        TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105。
      */
        var v = CodeToText[val[0]] + '-' + CodeToText[val[1]] + '-' + CodeToText[val[2]];
        // console.log(v);
        this.datas.address = v;
        geocoder.getLocation(v);
      },
      //点击定位按钮 省市区和详细地址一起查
      onSearch() {
        geocoder.getLocation(this.datas.address + this.datas.addressinfo);
      },
      //初始化地图
      init() {
        var that = this
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: new qq.maps.LatLng(31.8512, 117.26061), //安徽合肥蜀山
          zoom: 16
        });

        //绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function(event) {
          console.log(event.latLng.getLat(), event.latLng.getLng());//获取经度纬度
          that.datas.longitude=event.latLng.getLng();//经度
          that.datas.latitude=event.latLng.getLat();//纬度
          //创建marker标注
          var marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()),
            map: map
          });
          that.markersArray.push(marker);
          if (that.markersArray.length > 1) {
            for (let i = 0; i < that.markersArray.length - 1; i++) {
              that.markersArray[i].setMap(null); //清除标记
            }
          }
          var gps = event.latLng.getLat() + ',' + event.latLng.getLng()
          that.$emit('mapChange', gps)
        });
        //调用地址解析类
        geocoder = new qq.maps.Geocoder({
          complete: function(result) {
            map.setCenter(result.detail.location);
           console.log(result.detail.location);//经度纬度对象
           //填充数据经度纬度
           that.datas.longitude=result.detail.location.lng;//经度
           that.datas.latitude=result.detail.location.lat;//纬度

            var gps = result.detail.location.lat + ',' + result.detail.location.lng
            console.log(gps);
            that.$emit('mapChange', gps)
            var marker = new qq.maps.Marker({
              map: map,
              position: result.detail.location
            });
            that.markersArray.push(marker);
            if (that.markersArray.length > 1) {
              for (let i = 0; i < that.markersArray.length - 1; i++) {
                that.markersArray[i].setMap(null); //清除标记
              }
            }
          }
        });
      }
    }
  }
</script>
<style scoped>
  /*地图显示区*/
  #container {
    width: 95%;
    height: 300px;
    margin: 20px auto;
  }

  /*省市区*/
  .el-cascader {
    width: 32%;
  }

  /*文本框*/
  .el-input {
    width: 70%;
    margin-right: 8px;
  }
</style>
